<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>批量地址</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%; font-size:14px;line-height:20px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SmHmywutT146wyRzXMhgajrCG5MxIpo0"></script>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
    <template>
        <div class="app-container">
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" size="small" @click="new_data">新增</el-button>
                </el-col>
            </el-row>
            <el-dialog
                    title="新增"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center>
                <div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                        <el-form-item label="分公司名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="打卡地址" prop="addr">
                            <el-input v-model.number="ruleForm.addr"></el-input>
                        </el-form-item>
                        <div id="my_container"></div>
                        <el-form-item label="上班时间" prop="start_work_time">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.start_work_time"></el-time-picker>
                        </el-form-item>
                        <el-form-item label="下班时间" prop="end_work_time">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.end_work_time"></el-time-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </template>
</div>

</body>
</html>
<script>
    // 导入地图需要使用的插件
    import AMap from 'AMap'
    import store from '@/store'
    import Vue from 'vue'
    import { GetAjax, PostAjax, PatchAjax, DeleteAjax } from '@/api/myapi'
    import datetime from 'date-and-time'

    export default {
        name: "company_manage",
        data () {
            return {
                centerDialogVisible: false,
                centerDialogVisible_two: false,
                centerDialogVisible_patch: false,
                page_datas: [],
                ruleForm: {
                    name: '',
                    phone: '',
                    addr: '',
                    long: '',
                    lat: '',
                    start_work_time: '',
                    end_work_time: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入分公司名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' }
                    ],
                    addr: [
                        { required: true, message: '请输入打卡地址', trigger: 'blur' }
                    ],
                    start_work_time: [
                        { required: true, message: '请选择上班时间', trigger: 'change' }
                    ],
                    end_work_time: [
                        { required: true, message: '请选择下班时间', trigger: 'change' }
                    ],
                },
                delete_data: {},
                page_tatol: 100,
                search: '',
                keyword: '',
                my_pagination: {
                    page: 1,
                    page_size: 10,
                    search: '',
                },
            }
        },
        methods: {
            // 初始化地图插件的方法
            init() {
                var map = new AMap.Map('my_container',{
                    resizeEnable: true,
                    zoom: 18,
                    //   center: [121.542282,29.831995]
                })
                AMap.plugin('AMap.Geolocation',function(){ //异步加载插件
                    var geolocation = new AMap.Geolocation()
                    map.addControl(geolocation)
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(formName == 'ruleForm') {
                            console.log(datetime.format(this.ruleForm.start_work_time,"hh:mm"))
                            console.log(this.ruleForm)
                        } else{
                            console.log(this.ruleForm_patch)
                        }
                    } else {
                        console.log('error submit!!')
                        return false;
                    }
                })
            },
            resetForm(formName) {
                console.log(formName)
                this.centerDialogVisible = false
                this.$refs[formName].resetFields()
                this.centerDialogVisible_patch = false
            },
            new_data() {
                this.centerDialogVisible =true
                // 在这里使用$nextTick初始化地图插件即可
                this.$nextTick(() => {
                    this.init()
                });
            },
        },
        created: function() {
        }
    }
</script>

<style scoped>
    #my_container{
        margin-left: 110px;
        height: 300px;
        width: calc(100% - 110px);
    }
</style>
